forum

home / developersection / forums / center an element vertically and horizontally with the help of bootstrap

Ask Question

Center an element vertically and horizontally with the help of Bootstrap

Ethan Karla 486 28-Jul-2021

How to center an element vertically and horizontally with the help of Bootstrap?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

To center an element vertically and horizontally with the help of an Bootstrap is very simple with the help of an Bootstrap Flexbox : 

<!doctype html>

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='align-content-center align-items-center d-flex justify-content-center mb-3'>

        <div class='p-2 bg-secondary text-light'>Vertically and Horizontally Centered Container</div>

    </div>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy